<template>
  <div>
    <el-card style="margin:20px 0">
      <Categoryselect :show="!isShowTable" @getcategoryId="getcategoryId" />
    </el-card>

    <el-card>
      <!-- 属性列表 -->
      <div v-show="isShowTable">
        <el-button type="primary" icon="el-icon-plus" @click="addAttr">添加属性</el-button>
        <el-table style="width:100%;margin:20px 0" border :data="attrList">
          <el-table-column label="序号" prop="prop" width="80" type="index" align="center" />
          <el-table-column label="属性名称" prop="attrName" width="150" />
          <el-table-column label="属性值列表" prop="prop" width="width">
            <template slot-scope="{row,index}">
              <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id" type="success" style="margin:0 20px">{{ attrValue.valueName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="prop" width="250">
            <template slot-scope="{row,index}">
              <el-button type="warning" icon="el-icon-edit" size="mini" @click="upDataAttr(row)">编辑</el-button>
              <el-popconfirm title="这是一段内容确定删除吗？">
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加与属性值列表 -->
      <div v-show="!isShowTable">
        <el-form ref="form" :inline="true" label-width="80px" :model="attrInfo">
          <el-form-item label="属性名">
            <el-input v-model="attrInfo.attrName" placeholder="请输入属性名" />
          </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus" :disabled="!attrInfo.attrName" @click="addAttrValue">添加属性值</el-button>
        <el-button @click="isShowTable=true">取消</el-button>
        <el-table style="width:100%;margin:20px 0" border :data="attrInfo.attrValueList">
          <el-table-column type="index" label="序号" width="80" align="center" />
          <el-table-column prop="prop" width="width" align="center" label="属性值名称">
            <template slot-scope="{row,$index}">
              <el-input v-if="row.flag" :ref="$index" v-model="row.valueName" placeholder="请输入属性值名称" size="mini" @blur="toLook(row)" @keyup.native.enter="toLook(row)" />
              <span v-else style="display:block" @click="toEdit(row,$index)">{{ row.valueName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="prop" width="width" align="center" label="操作">
            <template slot-scope="{row,$index}">
              <el-popconfirm :title="`这是一段内容确定删除${row.valueName}吗？`" @onConfirm="deleteAttrValue($index)">
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" :disabled="attrInfo.attrValueList.length<1" @click="addOrupdataAttr">保存</el-button>
        <el-button @click="isShowTable=true">取消</el-button>
      </div>
    </el-card>

  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'Attr',
  data() {
    return {
      category1ID: '',
      category2ID: '',
      category3ID: '',
      attrList: [],
      isShowTable: true,
      lisShowTable: true,
      // 添加与修改所带的字段
      attrInfo: {
        attrName: '', // 属性名
        attrValueList: [
          // 属性值 每一个属性值都是一个字段
          // {
          //   attrId: 0,
          //   valueName: ''
          // }
        ],
        categoryId: 0,
        categoryLevel: 0
      }
    }
  },
  methods: {
    async getAttrList() {
      const { category1ID, category2ID, category3ID } = this
      const result = await this.$API.attr.reqAttrList(category1ID, category2ID, category3ID)
      if (result.code === 200) {
        this.attrList = result.data
      }
    },
    getcategoryId({ categoryID, level }) {
      if (level === 1) {
        this.category1ID = categoryID
      } else if (level === 2) {
        this.category2ID = categoryID
      } else {
        this.category3ID = categoryID
        this.getAttrList()
      }
    },
    // 属性值数组添加元素
    addAttrValue() {
      this.attrInfo.attrValueList.push({
        attrId: this.attrInfo.id,
        valueName: '',
        flag: true
      })
      this.$nextTick(() => {
        // 点击编辑 让属性最后一项聚焦
        this.$refs[this.attrInfo.attrValueList.length - 1].focus()
      })
    },
    // 添加属性按钮的回调
    addAttr() {
      this.isShowTable = false
      this.attrInfo = {
        attrName: '',
        attrValueList: [],
        categoryId: this.category3ID,
        categoryLevel: 3
      }
    },
    // 编辑
    upDataAttr(row) {
      console.log(row)
      this.isShowTable = false
      // 使用lodash解决深拷贝问题 点击取消 要保证仍然展示原来的数据
      this.attrInfo = cloneDeep(row)
      // 添加flag用于查看与编辑模式的切换
      this.attrInfo.attrValueList.forEach(item => {
        // item.flag = false 不是响应式添加
        // 响应式添加
        this.$set(item, 'flag', false)
      })
    },
    // 查看与编辑模式的切换
    toLook(row) {
      // 判断 如果属性值为空
      if (row.valueName.trim() === '') return this.$message('请输入正常的属性值')
      // 判断 新增属性值与已有的属性值不能重复
      const reResult = this.attrInfo.attrValueList.some(item => {
        if (row !== item) return row.valueName === item.valueName
      })
      if (reResult) return
      // console.log(row)
      row.flag = false
    },
    // 点击span切换为编辑模式
    toEdit(row, index) {
      row.flag = true
      this.$nextTick(() => {
        console.log(this.$refs[index])
        this.$refs[index].focus()
      })
    },
    // 气泡确认框的删除属性
    deleteAttrValue(index) {
      this.attrInfo.attrValueList.splice(index, 1)
    },
    async addOrupdataAttr() {
      // 属性值不能为空 提交到服务器的数据中不能有flag字段
      this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item => {
        if (item.valueName !== '') {
          // 删除flag
          delete item.flag
          return true
        }
      })
      try {
        await this.$API.attr.reqAddorUpdataAttr(this.attrInfo)
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        this.getAttrList()
        this.isShowTable = true
      } catch (error) {
        this.$message({
          message: '保存失败',
          type: 'error'
        })
      }
    }
  }
}
</script>

<style>
</style>
